<template>
  <div class="app-container">
    <div class="batchRemit initializeRoll">
      <div class="topDiv">
        <p class="title">
          <img src="../../../assets/images/wtb4.png" alt />
          <span>打款记录</span>
        </p>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
           <el-tab-pane label="发佣记录" name="Commission">
            <div class="containers center">
              <el-row>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div>
                    <div
                      style="
                        color: #0D9E59F;
                        margin-bottom: 5px;
                        color: #0d9e59;
                      "
                    >
                      ￥<span
                        style="
                          color: #0d9e59;
                          font-size: 30px;
                          margin-bottom: 5px;
                        "
                      >
                        93149.34
                      </span>
                    </div>
                    <div>账户余额(元)</div>
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div>
                    <div
                      style="
                        color: #0D9E59F;
                        margin-bottom: 5px;
                        color: #0d9e59;
                      "
                    >
                      ￥<span
                        style="
                          color: #0d9e59;
                          font-size: 30px;
                          margin-bottom: 5px;
                        "
                      >
                        83
                      </span>
                    </div>
                    <div>本月完成打款笔数</div>
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div
                    style="color: #F9800BF; margin-bottom: 5px; color: #f9800b"
                  >
                    ￥
                    <span
                      style="
                        color: #f9800b;
                        font-size: 30px;
                        margin-bottom: 5px;
                      "
                    >
                      38304.00
                    </span>
                  </div>
                  <div>本月完成打款(元)</div>
                </el-col>
              </el-row>
            </div>

            <el-table
              v-loading="loading"
              :data="roleList"
            >
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column
                label="提现时间"
                prop="crashTime"
                align="center"
                width="150"
              >
               <template slot-scope="scope">
                  <span>{{scope.row.crashTime||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column label="用户名称" prop="userName" align="center">
                 <template slot-scope="scope">
                  <span>{{scope.row.userName||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column label="用户昵称" prop="nickName" align="center">
                 <template slot-scope="scope">
                  <span>{{scope.row.nickName||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column
                label="提现渠道"
                prop="withdrawalType"
                align="center"
                :show-overflow-tooltip="true"
              >
               <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalType == '0'">支付宝</span>
                  <span v-show="scope.row.withdrawalType == '1'">银行卡</span>
                  <span v-show="scope.row.withdrawalType == '3'">其他</span>
                </template>
              </el-table-column>


              <el-table-column
                label="渠道名称"
                prop="channelName"
                align="center"
                :show-overflow-tooltip="true"
              >
               <template slot-scope="scope">
                  <span>{{scope.row.channelName||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column
                label="提现金额/元"
                prop="amount"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="收款户名"
                prop="accountName"
                align="center"
              >
               <template slot-scope="scope">
                  <span>{{scope.row.accountName||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column
                label="收款账户"
                prop="accountId"
                align="center"
              >
               <template slot-scope="scope">
                  <span>{{scope.row.accountId||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column label="身份证号" prop="idCard" align="center">
                 <template slot-scope="scope">
                  <span>{{scope.row.idCard||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column label="预留手机号" prop="phone" align="center">
                 <template slot-scope="scope">
                  <span>{{scope.row.phone||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column label="提现状态" align="center">
                  <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalStatus == 'success'">成功</span>
                  <span v-show="scope.row.withdrawalStatus != 'success'">失败</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现信息"
                prop="callbackMessage"
                align="center"
              > 
              <template slot-scope="scope">
                  <span>{{scope.row.callbackMessage||'暂无'}}</span>
                </template>
                </el-table-column>
              <el-table-column
                label="手续费"
                prop="commissionAmount"
                align="center"
              />
              <el-table-column
                label="实际到账金额"
                prop="realityAmount"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="充值记录" name="first">
            <div class="containers center">
              <el-row>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div>
                    <div
                      style="
                        color: #0D9E59F;
                        margin-bottom: 5px;
                        color: #0d9e59;
                      "
                    >
                      ￥<span
                        style="
                          color: #0d9e59;
                          font-size: 30px;
                          margin-bottom: 5px;
                        "
                      >
                        93149.34
                      </span>
                    </div>
                    <div>账户余额(元)</div>
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div>
                    <div
                      style="
                        color: #0D9E59F;
                        margin-bottom: 5px;
                        color: #0d9e59;
                      "
                    >
                      ￥<span
                        style="
                          color: #0d9e59;
                          font-size: 30px;
                          margin-bottom: 5px;
                        "
                      >
                        83
                      </span>
                    </div>
                    <div>本月完成打款笔数</div>
                  </div>
                </el-col>
                <el-col
                  :span="8"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div
                    style="color: #F9800BF; margin-bottom: 5px; color: #f9800b"
                  >
                    ￥
                    <span
                      style="
                        color: #f9800b;
                        font-size: 30px;
                        margin-bottom: 5px;
                      "
                    >
                      38304.00
                    </span>
                  </div>
                  <div>本月完成打款(元)</div>
                </el-col>
              </el-row>
            </div>

            <el-tabs
              v-model="activeName1"
              @tab-click="handleClick"
              style="transform: translateY(-10px)"
            >
              <el-tab-pane label="充值记录" name="first1">
                <span slot="label" style="font-size: 16px">
                  <i class="el-icon-pie-chart"> </i>
                  充值记录
                </span>
                <el-form ref="form1" :model="form1" label-width="90px">
                  <el-row :gutter="10">
                    <el-col :span="6" style="margin-right: 40px">
                      <el-form-item label="订单时间">
                        <el-date-picker
                          v-model="form.input1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                       
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label="订单时间">
                        <el-select
                          v-model="form.region"
                          placeholder="请选择活动区域"
                        >
                          <el-option
                            label="区域一"
                            value="shanghai"
                          ></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-button
                        native-type="reset"
                        size="small"
                        round
                        icon="el-icon-refresh"
                      >
                        重置
                      </el-button>
                      <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        round
                      >
                        搜索
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="流水号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="金额(元)" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="实际到账金额(元)"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="状态"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="创建时间"
                    align="center"
                  ></el-table-column>
                </el-table>
              </el-tab-pane>
              <!-- <el-tab-pane label="退款记录" name="second1">
                <span slot="label" style="font-size: 16px">
                  <i class="el-icon-pie-chart"> </i>
                  退款记录
                </span>
                <el-form
                  ref="form1"
                  :model="form1"
                  label-width="90px"
                  style="margin-top: 0px"
                >
                  <el-row :gutter="10">
                    <el-col :span="6" style="margin-right: 40px">
                      <el-form-item label="订单时间">
                        <el-date-picker
                          v-model="form.input1"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions0"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" align="center">
                      <el-button
                        native-type="reset"
                        round
                        size="small"
                        icon="el-icon-refresh"
                      >
                        重置
                      </el-button>
                      <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-search"
                        round
                      >
                        搜索
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form>

                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="流水号" align="center">
                  </el-table-column>
                  <el-table-column prop="name" label="金额(元)" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="实际到账金额(元)"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="状态"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="创建时间"
                    align="center"
                  ></el-table-column>
                </el-table>
              </el-tab-pane> -->
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="发票申请" name="second">
            <el-form
              ref="form"
              :model="form"
              label-width="90px"
              style="padding-top: 20px"
            >
              <el-row :gutter="10">
                <el-col :span="6" style="margin-right: 100px">
                  <el-form-item label="订单时间">
                    <el-date-picker
                      v-model="form.input1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                 
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-button
                    native-type="reset"
                    size="small"
                    round
                    icon="el-icon-refresh"
                  >
                    重置
                  </el-button>
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    round
                  >
                    搜索
                  </el-button>
                </el-col>
              </el-row>
            </el-form>

            <div class="containers center">
              <el-row style="margin-bottom: 0">
                <el-col
                  :span="12"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div>
                    <div
                      style="
                        color: #0D9E59F;
                        margin-bottom: 5px;
                        color: #0d9e59;
                      "
                    >
                      ￥<span
                        style="
                          color: #0d9e59;
                          font-size: 30px;
                          margin-bottom: 5px;
                        "
                      >
                        418884848
                      </span>
                    </div>
                    <div>已开票(元)</div>
                  </div>
                </el-col>
                <el-col
                  :span="12"
                  style="border-right: 0.1px solid #eeeeee; text-align: center"
                >
                  <div
                    style="color: #F9800BF; margin-bottom: 5px; color: #f9800b"
                  >
                    ￥
                    <span
                      style="
                        color: #f9800b;
                        font-size: 30px;
                        margin-bottom: 5px;
                      "
                    >
                      418884848
                    </span>
                  </div>
                  <div>未开票(元)</div>
                </el-col>
              </el-row>
            </div>
            <i class="brI" style="margin-top: 40px"></i>

            <!-- <el-row>
              <el-col :span="24" align="right">
                <el-button type="primary" size="mini">下载数据</el-button>
              </el-col>
            </el-row> -->

            <el-table :data="tableData" style="width: 100%; margin-top: 30px">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="date" label="流水号" align="center">
              </el-table-column>
              <el-table-column prop="name" label="订单金额(元)" align="center">
              </el-table-column>
              <el-table-column
                prop="address"
                label="可开票金额(元)"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="address" label="开票渠道" align="center">
              </el-table-column>
              <el-table-column prop="address" label="打款时间" align="center">
              </el-table-column>
            </el-table>

            <el-row style="margin-top: 20px">
              <el-col :span="3">
                <el-button type="primary" size="mini">全部开票</el-button>
                <el-button type="primary" size="mini">申请开票</el-button>
              </el-col>
              <el-col :span="5" style="transform: translateY(-10px)">
                待开票金额(元):
                <span style="color: red; font-size: 28px">￥0.00</span>
                已选0条记录￥0.00
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="申请记录" name="secondList">
            <div class="shenqingBox">
              <el-form ref="form" :model="form" label-width="130px">
                <el-row :gutter="10">
                  <el-col :span="6" style="margin-right:100px">
                    <el-form-item label="订单时间">
                      <el-date-picker
                        v-model="form.input1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="服务名称">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="发票金额(元/起)">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="发票金额(元/止)">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="发票状态">
                      <el-select
                        v-model="form.region"
                        placeholder="请选择发票状态"
                      >
                        <el-option label="状态一" value="shanghai"></el-option>
                        <el-option label="状态二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" align="center">
                    <el-button
                      native-type="reset"
                      size="small"
                      round
                      icon="el-icon-refresh"
                    >
                      重置
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-search"
                      round
                    >
                      搜索
                    </el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="date" label="申请时间" align="center">
              </el-table-column>
              <el-table-column prop="name" label="发票申请编号" align="center">
              </el-table-column>
              <el-table-column prop="address" label="服务名称" align="center">
              </el-table-column>
              <el-table-column prop="address" label="发票抬头" align="center">
              </el-table-column>
              <el-table-column prop="address" label="发票总额" align="center">
              </el-table-column>
              <el-table-column prop="address" label="税率" align="center">
              </el-table-column>
              <el-table-column prop="address" label="税额" align="center">
              </el-table-column>
              <el-table-column prop="address" label="发票状态" align="center">
              </el-table-column>
              <el-table-column prop="address" label="操作" align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="开通信息" name="secondText">
            <el-form
              ref="form"
              :model="form"
              label-width="140px"
              style="margin-top: 20px"
            >
              <el-row :gutter="10">
                <el-col :span="8" :offset="6">
                  <el-form-item label="企业名称">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="纳税人类型">
                    <el-radio-group v-model="form.resource">
                      <el-radio label="一般纳税人"></el-radio>
                      <el-radio label="小规模纳税人"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="纳税人识别号">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="单位注册地址及电话">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="开户行">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="银行账号">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="发票内容">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item label="默认发票内容">
                    <el-select v-model="form.region" placeholder="请选择内容">
                      <el-option label="内容一" value="shanghai"></el-option>
                      <el-option label="内容二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="20" align="center">
                  <el-button type="primary"> 编辑 </el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="邮寄地址" name="secondSite">
            <el-form
              ref="form"
              :model="form"
              label-width="140px"
              style="margin-top: 20px"
            >
              <el-row :gutter="10">
                <el-col :span="15" :offset="3">
                  <el-form-item label="详细地址">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="收件人名称">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
      value: "",
      options: [{ label: "label", value: "1" }],
      options1: [{ label: "银行卡", value: "1" }],
      showTan2: false,
      tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      form: {},
      form1: {},
      activeName: "Commission",
      activeName1: "first1",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>


<style lang='scss'>
.topDiv {
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: 20px;
  height: 807px;
  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
  .containers {
    height: 130px;
    // border: 1px red solid;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
  }
}
.batchRemit {
  .shenqingBox {
    // border: 1px red solid;
    display: flex;
    justify-content: space-evenly;
    .el-col {
      margin-right: 40px;
    }
  }
  .containers {
    margin: 20px 0px;
    border: 1px #eeeeee solid;
    padding: 30px;
  }
  .divColor {
    background-color: #e6a23c3b;
    border-radius: 5px;
    margin-right: 15px;
    padding: 10px 20px;
    .divFlex {
      display: flex;
      justify-content: space-between;
    }
    ul {
      li {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>